<template>
	<view class="home-content">
		<image src="/static/home/top-bg.jpg" mode="widthFix" class="top-bg"></image>
		<CustomNav :isBack="false" :custom="custom"></CustomNav>
		<view class="title-block">
			<view class="title">果园有礼</view>
			<view class="weather-block">
				<view class="name">果园镇</view>
				<image mode="aspectFit" src="/static/home/weather.png" class="weather-icon"></image>
				<view class="weather">多云28℃</view>
			</view>
		</view>
		<view class="content-block menu-block">
			<view class="left-menu-block">
				<navigator hover-class="none" url="/pages/impression/index" class="menu-item full">
					<image mode="heightFix" src="/static/home/impression_title.png" class="menu-name"></image>
				</navigator>
				<navigator hover-class="none" url="/pages/entrepreneurship/index" class="menu-item">
					<image mode="heightFix" src="/static/home/entrepreneurship_title.png" class="menu-name"></image>
				</navigator>
			</view>
			<view class="right-menu-block">
				<navigator hover-class="none" url="/pages/common/index?category=1" class="menu-item">
					<image mode="heightFix" src="/static/home/food_title.png" class="menu-name"></image>
				</navigator>
				<navigator hover-class="none" url="/pages/common/index?category=2" class="menu-item">
					<image mode="heightFix" src="/static/home/play_title.png" class="menu-name"></image>
				</navigator>
				<navigator hover-class="none" url="/pages/shopping/index" class="menu-item">
					<image mode="heightFix" src="/static/home/shopping_title.png" class="menu-name"></image>
				</navigator>
			</view>
		</view>
		<view @click="jump" class="cooperation">
			<image src="/static/home/cooper.jpg" style="width: 100%;height: 100%;"></image>
		</view>
		<view class="content-block news-block">
			<view class="block-title">
				<view class="block-unchecked FangZhengHanZhenGuangBiaoJianTi" :class="newCheck==2?'block-select':''"
					@click="newCheck=2">本期推荐</view>
				<view class="block-unchecked FangZhengHanZhenGuangBiaoJianTi" :class="newCheck==1?'block-select':''"
					@click="newCheck=1">乡村小品</view>
			</view>
			<view class="main">
				<block v-if="newCheck==1">
					<view class="list-block">
					<block v-if="newsList.length>0">
						<navigator hover-class="none" :url="'/pages/news/detail?id='+item.id" v-for="(item,index) in newsList" :key="item.id" class="news-item">
							<image mode="aspectFill" :src="item.cover_photo" class="news-photo"></image>
							<view class="news-info">
								<view class="news-title">{{item.title}}</view>
								<view class="news-create-time">发布日期：{{item.create_time}}</view>
							</view>
						</navigator>
					</block>
					<view v-else class="empty">暂无数据</view>
					</view>
				</block>
				<block v-if="newCheck==2">
					<view class="list-block">
						<block v-if="list.length>0">
							<navigator hover-class="none" :url="'/pages/common/detail?id='+item.id+'&category='+item.category"  v-for="(item,index) in list" :key="item.id" class="list-item" v-if="item.files[0]">
								<view class="cover-block">
									<image :src="item.files[0].url" mode="aspectFill" class="list-cover"></image>
								</view>
								<view class="info-block">
									<view class="name">{{item.name}}</view>
									<view class="score-block">
										<view class="iconfont icon-shoucang" v-for='index in item.score.toFixed()*1' :key='index'>
										</view>
									</view>
									<view class="position-block">
										<view class="iconfont icon-dingwei"></view>
										<view class="position">{{item.addr_name}}</view>
									</view>
									<view class="label-block">
										<view v-for="(item1,index1) in item.type" class="label-item">{{item1}}</view>
									</view>
								</view>
							</navigator>
						</block>
						<view v-else class="empty">暂无数据</view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getRecommendList,
		getNewsList
	} from '@/api/recommend.js';
	export default {
		data() {
			return {
				newsList: [],
				list: [],
				custom: null,
				newCheck: 2,
			}
		},
		onLoad() {
			this.custom = this.utils.getCustomNavData();
			this.getRecommend();
			this.getNews();
		},
		methods: {
			jump() {
				uni.switchTab({
					url: '/pages/cooperation/index'
				})
			},
			getNews() {
				getNewsList().then((res)=>{
					if(res.status==1){
						this.newsList=res.data;
					}else{
						this.utils.showToast(res.message);
					}
				}).catch((res)=>{
					this.utils.showToast('乡村小品加载失败')
				})
			},
			getRecommend() {
				getRecommendList().then((res) => {
					if(res.status==1){
						this.list=res.data;
					}else{
						this.utils.showToast(res.message);
					}
				}).catch((res) => {
					this.utils.showToast('本期推荐加载失败')
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home-content {
		overflow: hidden;
		width: 100%;

		.top-bg {
			width: 100%;
			position: absolute;
		}

		.title-block {
			position: relative;
			margin-top: 280rpx;
			display: flex;
			flex-direction: column;
			padding: 0 30rpx;

			.title {
				font-size: 58rpx;
				font-weight: bold;
				color: #fff;
				text-shadow: 3px 3px 1px rgba(0, 0, 0, 0.2);
			}

			.weather-block {
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-top: 10rpx;
				color: #fff;
				font-size: 28rpx;

				.weather-icon {
					width: 50rpx;
					height: 50rpx;
					margin: 0 20rpx;
				}
			}
		}

		.content-block {
			width: calc(100% - 60rpx);
			margin: 20rpx auto;
			position: relative;
			padding: 20rpx;
			background: #fff;
			border-radius: 22rpx;
			box-shadow: 0 0 10px 0px #dadada;
		}

		.content-block.menu-block {
			display: flex;
			flex-direction: row;

			.left-menu-block,
			.right-menu-block {
				width: calc(50% - 6rpx);
				height: 610rpx;
				display: flex;
				flex-direction: column;
			}

			.menu-item {
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.menu-name {
				height: 60rpx;
			}

			.left-menu-block {
				margin-right: 12rpx;

				.menu-item {
					width: 100%;
					height: calc((100% - 20rpx)/3);
					background: url('@/static/home/entrepreneurship_bg.png') no-repeat center;
					background-size: 100% 100%;
				}

				.menu-item.full {
					width: 100%;
					height: calc((100% - 20rpx)/3*2 + 10rpx);
					margin-bottom: 10rpx;
					background: url('@/static/home/impression_bg.png') no-repeat center;
					background-size: 100% 100%;
				}
			}

			.right-menu-block {
				.menu-item {
					width: 100%;
					height: calc((100% - 20rpx)/3);
					margin-bottom: 10rpx;
				}

				.menu-item:nth-child(1) {
					background: url('@/static/home/food_bg.png') no-repeat center;
					background-size: 100% 100%;
				}

				.menu-item:nth-child(2) {
					background: url('@/static/home/play_bg.png') no-repeat center;
					background-size: 100% 100%;
				}

				.menu-item:nth-child(3) {
					background: url('@/static/home/shopping_bg.png') no-repeat center;
					background-size: 100% 100%;
				}

				.menu-item:last-child {
					margin-bottom: 0;
				}
			}
		}

		.cooperation {
			border-radius: 12rpx;
			width: calc(100% - 60rpx);
			height: 200rpx;
			margin: 20rpx auto;
		}

		.content-block.news-block {
			.main {
				max-height: 50vh;
				overflow-y: scroll;
			}

			.block-title {
				font-size: 38rpx;
				flex-flow: row;
				justify-content: flex-start;
				display: flex;
			}

			.block-unchecked {
				width: 180rpx;
				color: #9FA8B4;
			}

			.block-select {
				color: #000;

			}

			.news-item {
				width: 100%;
				padding: 30rpx 0;
				border-bottom: 1px solid #efefef;
				display: flex;
				flex-direction: row;

				.news-photo {
					width: 140rpx;
					height: 140rpx;
					margin-right: 20rpx;
				}

				.news-info {
					width: calc(100% - 160rpx);
					height: 140rpx;
					position: relative;

					.news-title {
						text-align: justify;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}

					.news-create-time {
						position: absolute;
						bottom: 0rpx;
						left: 0;
						color: #999;
						font-size: 28rpx;
					}
				}
			}

			.news-item:last-child {
				border-bottom: none;
			}
		}
	}

	.list-block {
		width: 100%;
		display: flex;
		flex-direction: column;
		padding-top: 20px;

		.list-item {
			width: 100%;
			display: flex;
			flex-direction: row;
			margin-bottom: 20rpx;

			.cover-block {
				position: relative;
				width: 210rpx;
				height: 210rpx;
				margin-right: 20rpx;

				.list-cover {
					width: 100%;
					height: 100%;
					border-radius: 30rpx;
				}

				.ranking-block {
					display: flex;
					padding: 6rpx 0 0 16rpx;
					color: #fff;
					position: absolute;
					font-size: 28rpx;
					top: 0;
					left: -2px;
					width: 120rpx;
					height: 60rpx;
					// background: url('@/static/food/ranking.png') no-repeat center;
					background-size: 100% 100%;
				}
			}

			.info-block {
				display: flex;
				flex-direction: column;
				width: calc(100% - 230rpx);

				.name {
					font-size: 36rpx;
					font-weight: bold;
					margin-right: 30rpx;
				}

				.score-block {
					margin-top: 10rpx;
					display: flex;
					align-items: center;

					.iconfont {
						color: #FD8249;
						font-size: 28rpx;
						margin-right: 10rpx;
					}

					.score {
						font-size: 30rpx;
						font-weight: bold;
					}
				}

				.position-block {
					margin-top: 10rpx;
					display: flex;
					align-items: center;

					.iconfont {
						flex-grow: 0;
						color: #999;
						font-size: 28rpx;
					}

					.position {
						color: #999;
						font-size: 28rpx;
						flex-grow: 1;
					}
				}

				.label-block {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					margin-top: 20rpx;

					.label-item {
						background: #DDFDFE;
						color: $uni-color-primary;
						font-size: 24rpx;
						padding: 5rpx 10rpx;
						margin-bottom: 16rpx;
						margin-right: 16rpx;
						border-radius: 12rpx;
					}
				}
			}
		}
	}
</style>
